@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }

   body {
       font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       line-height: 1.6;
       background-color: black;
       position: relative;
       overflow-x: hidden;
   }

   ::-webkit-scrollbar {
       width: 6px;
   }

   ::-webkit-scrollbar-track {
       background: #0d111700;
   }

   ::-webkit-scrollbar-thumb {
       background: linear-gradient(180deg, #11739d, #1f4358);
       border-radius: 3px;
   }



   .whatsapp-float {
       position: fixed;
       bottom: 30px;
       right: 30px;
       width: 60px;
       height: 60px;
       background: #25d366;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3);
       transition: all 0.3s ease;
       z-index: 1000;
       animation: pulse 2s infinite;
   }

   .whatsapp-float:hover {
       transform: translateY(-3px);
       box-shadow: 0 12px 35px rgba(37, 211, 102, 0.4);
   }

   .whatsapp-float svg {
       width: 30px;
       height: 30px;
       fill: white;
   }

   @keyframes pulse {
       0% {
           box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
       }

       70% {
           box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
       }

       100% {
           box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
       }
   }

   .chat-popup {
       position: fixed;
       bottom: 16px;
       right: 18px;
       width: 276px;
       background: white;
       border-radius: 20px;
       box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
       transform: translateY(100%);
       opacity: 0;
       transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
       z-index: 1000;
       overflow: hidden;
   }

   .chat-popup.active {
       transform: translateY(0);
       opacity: 1;
   }

   .chat-header {
       background: #25d366;
       padding: 20px;
       color: white;
       position: relative;
   }

   .chat-header .close-btn {
       position: absolute;
       top: 15px;
       right: 15px;
       width: 30px;
       height: 30px;
       background: rgba(255, 255, 255, 0.2);
       border: none;
       border-radius: 50%;
       color: white;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: background 0.3s ease;
   }

   .chat-header .close-btn:hover {
       background: rgba(255, 255, 255, 0.3);
   }

   .whatsapp-logo {
       display: flex;
       align-items: center;
       gap: 12px;
       margin-bottom: 10px;
   }

   .whatsapp-logo svg {
       width: 35px;
       height: 35px;
       fill: white;
   }

   .whatsapp-logo span {
       font-size: 18px;
       font-weight: 600;
   }

   .chat-subtitle {
       font-size: 14px;
       opacity: 0.9;
   }

   .chat-body {
       padding: 25px 20px;
   }

   .message-bubble {
       background: #f0f2f5;
       border-radius: 18px;
       padding: 15px 18px;
       margin-bottom: 15px;
       position: relative;
       animation: slideIn 0.5s ease;
   }

   .message-bubble::before {
       content: '';
       position: absolute;
       bottom: -8px;
       left: 20px;
       width: 0;
       height: 0;
       border-left: 8px solid transparent;
       border-right: 8px solid transparent;
       border-top: 8px solid #f0f2f5;
   }

   .message-text {
       font-size: 14px;
       color: #333;
       margin-bottom: 8px;
       line-height: 1.4;
   }

   .message-emoji {
       font-size: 20px;
       margin-right: 8px;
   }

   .online-indicator {
       display: flex;
       align-items: center;
       gap: 8px;
       font-size: 12px;
       color: #666;
       margin-bottom: 15px;
   }

   .online-dot {
       width: 8px;
       height: 8px;
       background: #25d366;
       border-radius: 50%;
       animation: blink 1.5s infinite;
   }

   @keyframes blink {

       0%,
       50% {
           opacity: 1;
       }

       51%,
       100% {
           opacity: 0.3;
       }
   }

   .chat-button {
       background: #25d366;
       color: white;
       border: none;
       padding: 15px 25px;
       border-radius: 25px;
       width: 100%;
       font-size: 16px;
       font-weight: 600;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 10px;
       transition: all 0.3s ease;
   }

   .chat-button:hover {
       background: #1ea952;
       transform: translateY(-2px);
   }

   .chat-button svg {
       width: 20px;
       height: 20px;
       fill: white;
   }

   @keyframes slideIn {
       from {
           opacity: 0;
           transform: translateX(-30px);
       }

       to {
           opacity: 1;
           transform: translateX(0);
       }
   }



   .particles {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       pointer-events: none;
       z-index: 1;
   }

   .particle {
       position: absolute;
       width: 4px;
       height: 4px;
       background: rgba(255, 255, 255, 0.6);
       border-radius: 50%;
       animation: rise 3s linear infinite;
   }

   @keyframes rise {
       from {
           transform: translateY(100vh);

           opacity: 0.5;
       }

       to {
           transform: translateY(-10vh);

           opacity: 1;
       }
   }

   .navbar {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       backdrop-filter: blur(20px);
       -webkit-backdrop-filter: blur(20px);
       border-bottom: 1px solid rgba(255, 255, 255, 0.1);
       box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
       z-index: 1000;
       transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
       transform: translateY(0);
   }

   .navbar::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 1px;
       background: linear-gradient(90deg, rgb(143, 143, 143), rgb(255, 255, 255), rgb(90, 90, 90));
       opacity: 0;
       animation: shimmer 3s ease-in-out infinite;
   }


   @keyframes shimmer {

       0%,
       100% {
           opacity: 0;
           transform: translateX(-100%);
       }

       50% {
           opacity: 1;
           transform: translateX(100%);
       }
   }

   .navbar.scrolled {
       background: rgba(255, 255, 255, 0.08);
       backdrop-filter: blur(25px);
       box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
       border-bottom: 1px solid rgba(255, 255, 255, 0.15);
   }

   .navbar.hidden {
       transform: translateY(-100%);
   }

   .nav-container {
       max-width: 1400px;
       margin: 0 auto;
       padding: 0 24px;
       display: flex;
       justify-content: start;
       align-items: center;
       height: 90px;
       position: relative;
   }


   .logo.magnetic {
       width: 31%;
   }

   .logo.magnetic img {
       margin-left: 191px;
       width: 160px;
       margin-top: 7px;
   }


   .nav-menu {
       display: flex;
       list-style: none;
       align-items: center;
       gap: 35px;
       position: relative;
   }


   .nav-menu li {
       position: relative;
       z-index: 2;
   }

   .nav-menu a {
       text-decoration: none;
       color: rgba(255, 255, 255, 0.9);
       font-weight: 500;
       font-size: 0.95rem;
       transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
       position: relative;
       padding: 12px 20px;
       border-radius: 20px;
       letter-spacing: -0.01em;
   }



   .nav-menu a::after {
       content: '';
       position: absolute;
       bottom: 8px;
       left: 50%;
       width: 0;
       height: 2px;
       background: linear-gradient(90deg, transparent, #2ba5d9, transparent);
       transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
       transform: translateX(-50%);
       border-radius: 1px;
   }

   .nav-menu a::before {
       content: '';
       position: absolute;
       top: 8px;
       left: 50%;
       width: 0;
       height: 2px;
       background: linear-gradient(90deg, transparent, #ffffff, transparent);
       transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
       transform: translateX(-50%);
       border-radius: 1px;
   }

   .nav-menu a:hover::before {
       width: 60%;
   }

   .nav-menu a:hover::after {
       width: 60%;
   }

   .nav-menu a:hover {
       color: #fff;
       transform: translateY(-3px);
       filter: drop-shadow(0 4px 12px rgba(255, 255, 255, 0.3));
   }


   .cta-btn {
       background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
       color: rgb(255, 255, 255) !important;
       padding: 14px 28px !important;
       border-radius: 10px !important;
       border: 1px solid rgba(255, 255, 255, 0.2) !important;
       cursor: pointer;
       font-weight: 600;
       transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
       box-shadow: 0 8px 24px rgba(255, 255, 255, 0.1);
       position: relative;
       overflow: hidden;
       backdrop-filter: blur(10px);
       letter-spacing: -0.01em;
   }

   .cta-btn::before {
       content: '';
       position: absolute;
       top: 0;
       left: -7%;
       width: 100%;
       height: 100%;
       background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
       transition: left 0.6s ease;
   }

   .cta-btn:hover::before {
       left: 0%;
   }



   .cta-btn::after {
       display: none !important;
   }

   .cta-btn::after {
       content: '';
       position: absolute;
       top: 0;
       left: -7%;
       width: 100%;
       height: 100%;
       background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
       transition: left 0.6s ease;
   }

   .cta-btn:hover::after {
       left: 0%;
   }



   .cta-btn::before {
       display: none !important;
   }


   .hamburger {
       display: none;
       flex-direction: column;
       cursor: pointer;
       padding: 8px;
       gap: 5px;
       border-radius: 12px;
       background: rgba(255, 255, 255, 0.1);
       backdrop-filter: blur(10px);
       border: 1px solid rgba(255, 255, 255, 0.15);
       transition: all 0.4s ease;
   }

   .hamburger:hover {
       background: black;
       transform: scale(1.1);
   }

   .hamburger span {
       width: 24px;
       height: 2px;
       background: rgba(255, 255, 255, 0.9);
       transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
       border-radius: 2px;
       position: relative;
   }

   .hamburger span::after {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: rgba(255, 255, 255, 0.5);
       border-radius: 2px;
       transform: scaleX(0);
       transition: transform 0.3s ease;
       transform-origin: left;
   }

   .hamburger:hover span::after {
       transform: scaleX(1);
   }

   .hamburger.active span:nth-child(1) {
       transform: rotate(45deg) translate(7px, 7px);
   }

   .hamburger.active span:nth-child(2) {
       opacity: 0;
       transform: scale(0);
   }

   .hamburger.active span:nth-child(3) {
       transform: rotate(-45deg) translate(7px, -7px);
   }


   .mobile-menu {
       position: fixed;
       top: 80px;
       left: -100%;
       width: 100%;
       height: calc(100vh - 80px);
       background: rgb(0, 0, 0);
       backdrop-filter: blur(25px);
       -webkit-backdrop-filter: blur(25px);
       display: flex;
       flex-direction: column;
       padding: 60px 30px;
       gap: 32px;
       transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
       z-index: 999;
       border-top: 1px solid rgba(255, 255, 255, 0.1);
   }

   .mobile-menu.active {
       left: 0;
   }

   .mobile-menu a {
       color: rgba(255, 255, 255, 0.9);
       text-decoration: none;
       font-size: 1.1rem;
       font-weight: 500;
       padding: 20px 24px;
       border-radius: 16px;
       transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
       position: relative;
       overflow: hidden;
       background: rgba(255, 255, 255, 0.05);
       border: 1px solid rgba(255, 255, 255, 0.1);
       backdrop-filter: blur(10px);
       letter-spacing: -0.01em;
   }

   .mobile-menu a::before {
       content: '';
       position: absolute;
       top: 0;
       left: -100%;
       width: 100%;
       height: 100%;
       background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
       transition: left 0.6s ease;
   }

   .mobile-menu a:hover::before {
       left: 100%;
   }

   .mobile-menu a:hover {
       color: #fff;
       transform: translateX(12px) scale(1.02);
       background: rgba(255, 255, 255, 0.1);
       border: 1px solid rgba(255, 255, 255, 0.2);
       box-shadow: 0 8px 24px rgba(255, 255, 255, 0.15);
   }


   .hero {
       height: 120vh;
       position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
       overflow: hidden;
   }

   .hero::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23333" stroke-width="0.5" opacity="0.3"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
       opacity: 0.1;
       animation: gridMove 20s linear infinite;
   }

   @keyframes gridMove {
       0% {
           transform: translate(0, 0);
       }

       100% {
           transform: translate(10px, 10px);
       }
   }

   .hero-container {
       text-align: center;
       z-index: 2;
       max-width: 1200px;
       padding: 0 20px;
       animation: fadeInUp 1s ease-out;
   }

   @keyframes fadeInUp {
       0% {
           opacity: 0;
           transform: translateY(50px);
       }

       100% {
           opacity: 1;
           transform: translateY(0);
       }
   }

   .hero h1 {

       font-size: clamp(2.5rem, 4.5vw, 6rem);
       font-weight: 700;
       color: #2ba5d9;
       margin-bottom: 20px;
       background: linear-gradient(45deg, #ffffff, hsla(0, 0%, 0%, 0.61), #2ba5d9);
       background-size: 300% 10%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
       animation: textShine 6s ease-in-out infinite;
       letter-spacing: -1px;
       line-height: 1.1;
       text-align: center;
   }

   @keyframes textShine {

       0%,
       100% {
           background-position: 0% 100%;
       }

       50% {
           background-position: 100% 50%;
       }
   }

   .hero-subtitle {
       font-size: clamp(1.2rem, 3vw, 1.8rem);
       color: #888;
       margin-bottom: 30px;
       animation: fadeIn 1s ease-out 0.5s both;
       max-width: 600px;
       margin-left: auto;
       margin-right: auto;
   }

   @keyframes fadeIn {
       0% {
           opacity: 0;
       }

       100% {
           opacity: 1;
       }
   }

   .cta-buttons {
       display: flex;
       gap: 20px;
       justify-content: center;
       flex-wrap: wrap;
       margin-bottom: 50px;
       animation: slideUp 1s ease-out 1s both;
   }

   @keyframes slideUp {
       0% {
           opacity: 0;
           transform: translateY(30px);
       }

       100% {
           opacity: 1;
           transform: translateY(0);
       }
   }

   .btn {
       padding: 15px 35px;
       font-size: 1.1rem;
       font-weight: 600;
       text-decoration: none;
       border-radius: 50px;
       transition: all 0.3s ease;
       position: relative;
       overflow: hidden;
       border: 2px solid transparent;
       cursor: pointer;
       text-transform: uppercase;
       letter-spacing: 1px;
   }

   .btn-primary {
       background: linear-gradient(45deg, #1a76ab, #2ba5d9);
       color: white;
   }

   .btn-primary:hover {
       transform: translateY(-3px);
       box-shadow: 0 10px 25px #2ba5d9;
   }

   .btn-secondary {
       background: transparent;
       color: #fff;
       border: 2px solid #fff;
   }

   .btn-secondary:hover {
       background: #fff;
       color: #000;
       transform: translateY(-3px);
       box-shadow: 0 10px 25px rgba(255, 255, 255, 0.2);
   }


   .scroll-indicator {
       position: absolute;
       bottom: 30px;
       left: 50%;
       transform: translateX(-50%);
       color: #fff;
       text-align: center;
       animation: bounce 2s infinite;
       cursor: pointer;
   }

   @keyframes bounce {

       0%,
       20%,
       50%,
       80%,
       100% {
           transform: translateX(-50%) translateY(0);
       }

       40% {
           transform: translateX(-50%) translateY(-10px);
       }

       60% {
           transform: translateX(-50%) translateY(-5px);
       }
   }

   .scroll-arrow {
       width: 30px;
       height: 30px;
       border: 2px solid #fff;
       border-top: none;
       border-right: none;
       transform: rotate(-45deg);
       margin: 10px auto;
   }


   .about-section {
       min-height: 100vh;
       background: linear-gradient(135deg, #0a0a0a 0%, #111 50%, #0a0a0a 100%);
       padding: 100px 20px;
       position: relative;
       overflow: hidden;
   }

   .about-container {
       max-width: 1200px;
       margin: 0 auto;
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 80px;
       align-items: center;
   }

   .about-text h2 {
       font-size: clamp(2.5rem, 4vw, 4rem);
       font-weight: 800;
       margin-bottom: 30px;
       background: linear-gradient(45deg, #1a76ab, #0000002f, #2ba5d9);
       background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
       animation: textShine 3s ease-in-out infinite;
   }

   .about-text p {
       font-size: 1.2rem;
       color: #ccc;
       margin-bottom: 20px;
       line-height: 1.8;
   }

   .stats-grid {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 30px;
       margin-top: 40px;
       cursor: pointer;
   }

   .stat-item {
       text-align: center;
       padding: 30px 20px;
       background: rgba(255, 255, 255, 0.05);
       border: 1px solid rgba(255, 255, 255, 0.1);
       border-radius: 20px;
       backdrop-filter: blur(10px);
       transition: all 0.3s ease;
   }

   .stat-item:hover {
       transform: translateY(-10px);
       background: rgba(255, 255, 255, 0.1);
       box-shadow: 0 20px 40px #1a76ab;
   }

   .stat-number {
       font-size: 2.5rem;
       font-weight: 800;
       color: #f5f5f5;
       display: block;
       transition: all 0.3s ease;
   }

   .stat-number.animate {
       animation: counterPulse 0.6s ease-out;
   }

   @keyframes counterPulse {
       0% {
           transform: scale(1);
       }

       50% {
           transform: scale(1.1);
           color: #1a76ab;
       }

       100% {
           transform: scale(1);
       }
   }

   .stat-label {
       color: #ccc;
       margin-top: 10px;
   }

   .about-visual {
       position: relative;
       cursor: pointer;
   }

   .mission-image-container {
       display: flex;
       justify-content: center;
       align-items: center;
       position: relative;
       width: 100%;
       max-width: 400px;
       height: 300px;
       margin: 0 auto;
   }

   .mission-image {
       width: 100%;
       max-width: 1150px;
       height: auto;
       /* object-fit: contain; */
       filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
       transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
       animation: float 3s ease-in-out infinite;
   }


   .mission-image:hover {
       transform: scale(1.1);
       filter: drop-shadow(0 0 30px #c2c2c273);
   }

   @keyframes float {

       0%,
       100% {
           transform: translateY(0px);
       }

       50% {
           transform: translateY(-10px);
       }
   }

   .visual-card {
       background: rgba(255, 255, 255, 0.08);
       border: 1px solid rgba(255, 255, 255, 0.1);
       border-radius: 30px;
       padding: 50px;
       backdrop-filter: blur(20px);
       position: relative;
       overflow: hidden;
       margin-top: 73px;

   }

   .visual-card::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: linear-gradient(45deg, #1a76ab8a, #0000002f, #00000075);
       opacity: 0;
       transition: opacity 0.4s ease;
   }

   .visual-card:hover::before {
       opacity: 1;
   }


   .services-section {
       min-height: 100vh;
       background: #111;
       padding: 100px 20px;
       position: relative;
   }

   .services-container {
       max-width: 1400px;
       margin: 0 auto;
   }

   .section-header {
       text-align: center;
       margin-bottom: 80px;
   }

   .section-header h2 {
       font-size: clamp(2.5rem, 4vw, 4rem);
       font-weight: 800;
       margin-bottom: 20px;
       background: linear-gradient(45deg, #1a76ab, #0000002f, #2ba5d9);
       background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
       animation: textShine 3s ease-in-out infinite;
   }

   .section-subtitle {
       font-size: clamp(1rem, 2.5vw, 1.2rem);
       color: #888;
       max-width: 600px;
       margin: 0 auto;
   }

   .services-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
       gap: 40px;
       cursor: pointer;
   }

   .service-card {
       background: rgba(255, 255, 255, 0.05);
       border: 1px solid rgba(255, 255, 255, 0.1);
       border-radius: 25px;
       padding: 40px 30px;
       backdrop-filter: blur(10px);
       position: relative;
       overflow: hidden;
       transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
   }

   .service-card::before {
       content: '';
       position: absolute;
       top: 0;
       left: -100%;
       width: 100%;
       height: 100%;
       background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
       transition: left 0.6s ease;
   }

   .service-card:hover::before {
       left: 100%;
   }

   .service-card:hover {
       transform: translateY(-15px);
       background: rgba(255, 255, 255, 0.08);
       box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
   }



   .service-title {
       font-size: 1.5rem;
       font-weight: 700;
       margin-bottom: 15px;
       color: #fff;
   }

   .service-description {
       color: #ccc;
       line-height: 1.7;
       margin-bottom: 25px;
   }

   .service-features {
       list-style: none;
   }

   .service-features li {
       color: #aaa;
       margin-bottom: 8px;
       padding-left: 20px;
       position: relative;
   }

   .service-features li::before {
       content: '✓';
       position: absolute;
       left: 0;
       color: #1a76ab;
       font-weight: bold;
   }


   .portfolio-section {
       min-height: 100vh;
       background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
       padding: 100px 20px;
   }

   .testimonials-section {
       min-height: 70vh;
       background: #111;
       padding: 100px 20px;
       position: relative;
       overflow: hidden;
   }

   .testimonials-container {
       max-width: 1400px;
       margin: 0 auto;
   }

   .testimonials-scroll-container {
       overflow: hidden;
       position: relative;
       margin-top: 50px;
   }

   .testimonials-scroll {
       display: flex;
       gap: 30px;
       animation: scrollTestimonials 60s linear infinite;
       width: fit-content;
   }

   @keyframes scrollTestimonials {
       0% {
           transform: translateX(0);
       }

       100% {
           transform: translateX(-50%);
       }
   }

   .testimonial-card {
       background: rgba(255, 255, 255, 0.05);
       border: 1px solid rgba(255, 255, 255, 0.1);
       border-radius: 20px;
       padding: clamp(20px, 4vw, 28px);
       color: #fff;
       backdrop-filter: blur(10px);
       transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
       width: clamp(280px, 25vw, 300px);
       height: clamp(280px, 25vw, 300px);
       flex-shrink: 0;
       display: flex;
       flex-direction: column;
       position: relative;
       overflow: hidden;
   }


   .testimonial-badge {
       align-self: flex-start;
       display: inline-flex;
       align-items: center;
       gap: 8px;
       padding: 8px 12px;
       margin-bottom: 10px;
       background: rgba(255, 255, 255, 0.08);
       border: 1px solid rgba(255, 255, 255, 0.15);
       border-radius: 12px;
       color: #fff;
       font-size: clamp(0.75rem, 1.8vw, 0.85rem);
       font-weight: 600;
       letter-spacing: 0.2px;
       box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
   }

   .testimonial-badge .dot {
       width: 8px;
       height: 8px;
       border-radius: 50%;
       background: #1a76ab;
       box-shadow: 0 0 10px #29a4d9;
   }


   .testimonial-card:hover {
       animation-play-state: paused;
   }

   .testimonial-rating {
       color: #2aa3d8;
       letter-spacing: 2px;
       margin-bottom: 14px;
       font-size: clamp(0.9rem, 2.2vw, 1rem);
       position: relative;
       display: flex;
       gap: 2px;
   }

   .testimonial-rating .star {
       position: relative;
       animation: starLoad 3s ease-in-out infinite;
       will-change: opacity, transform;
   }

   .testimonial-rating .star:nth-child(1) {
       animation-delay: 0s;
   }

   .testimonial-rating .star:nth-child(2) {
       animation-delay: 0.3s;
   }

   .testimonial-rating .star:nth-child(3) {
       animation-delay: 0.6s;
   }

   .testimonial-rating .star:nth-child(4) {
       animation-delay: 0.9s;
   }

   .testimonial-rating .star:nth-child(5) {
       animation-delay: 1.2s;
   }

   @keyframes starLoad {

       0%,
       100% {
           opacity: 0.7;
           text-shadow: 0 0 8px #2aa3d8;
           transform: scale(1);
       }

       50% {
           opacity: 1;
           text-shadow: 0 0 12px #2aa3d8;
           transform: scale(1.05);
       }
   }

   .testimonial-quote {
       color: #ddd;
       line-height: 1.4;
       margin-bottom: 18px;
       font-size: clamp(0.8rem, 2vw, 0.9rem);
       flex-grow: 1;
       padding-top: 10px;
       padding-bottom: clamp(60px, 8vw, 70px);
       display: -webkit-box;
       -webkit-line-clamp: 3;
       line-clamp: 3;
       -webkit-box-orient: vertical;
       overflow: hidden;
   }

   .testimonial-author {
       display: flex;
       align-items: center;
       gap: 12px;
       margin-top: auto;
       position: absolute;
       bottom: clamp(20px, 4vw, 28px);
       left: clamp(20px, 4vw, 28px);
       right: clamp(20px, 4vw, 28px);
   }

   .testimonial-author h4 {
       color: #fff;
       font-size: clamp(0.9rem, 2.2vw, 1rem);
       margin-bottom: 2px;
   }

   .testimonial-author span {
       color: #aaa;
       font-size: clamp(0.8rem, 2vw, 0.9rem);
   }

   .avatar {
       width: clamp(35px, 4vw, 42px);
       height: clamp(35px, 4vw, 42px);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       background: linear-gradient(135deg, #2aa3d8, #2aa3d891);
       color: #ffffff;
       font-weight: 800;
       letter-spacing: 1px;
       overflow: hidden;
       position: relative;
   }

   .avatar img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       border-radius: 50%;
   }

   /* Pause animation on hover */
   .testimonials-scroll-container:hover .testimonials-scroll {
       animation-play-state: paused;
   }




   

   @media (max-width: 768px) {
       .testimonials-section {
           padding: 80px 15px;
       }

       .testimonial-card {
           min-height: 280px;
           height: auto;
       }

       .testimonials-scroll {
           gap: 20px;
       }

       .testimonial-quote {
           line-height: 1.3;
           -webkit-line-clamp: 3;
           line-clamp: 3;
       }

       .testimonial-badge {
           padding: 6px 10px;
       }

       .testimonial-rating {
           margin-bottom: 12px;
       }
   }

   @media (max-width: 480px) {
       .testimonial-card {
           min-height: 260px;
           height: auto;
       }

       .testimonial-quote {
           line-height: 1.3;
           -webkit-line-clamp: 3;
           line-clamp: 3;
       }

       .testimonial-author h4 {
           font-size: clamp(0.8rem, 2vw, 0.9rem);
       }

       .testimonial-author span {
           font-size: clamp(0.7rem, 1.8vw, 0.8rem);
       }

       .avatar {
           font-size: 0.8rem;
       }

       .testimonial-badge {
           padding: 5px 8px;
       }

       .testimonial-rating {
           margin-bottom: 10px;
       }
   }


   .slides-container {
       position: relative;
       width: auto;
       height: 56vh;
   }

   .slide {
       position: fixed;
       top: 185px;
       left: 0;
       width: 100%;
       height: auto;
       opacity: 0;
       visibility: hidden;
       transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
       z-index: 1;
   }

   .slide.active {
       opacity: 1;
       visibility: visible;
       z-index: 2;

   }

   .slide.pink {
       background: linear-gradient(135deg, transparent 0%, transparent 100%);
   }

   .slide.green {
       background: linear-gradient(135deg, transparent 0%, transparent 100%);
   }

   .slide.orange {
       background: linear-gradient(135deg, transparent 0%, transparent 100%);
   }

   .slide.purple {
       background: linear-gradient(135deg, transparent 0%, transparent 100%);
   }

   .slide.dark {
       background: linear-gradient(135deg, transparent 0%, transparent 100%);
   }

   .slide.blue {
       background: linear-gradient(135deg, transparent 0%, transparent 100%);
   }

   .content-wrapper {
       display: flex;
       align-items: center;
       justify-content: center;
       height: 100vh;
       padding: 0 5%;
       max-width: 1400px;
       margin: 0 auto;
   }

   .content-wrapper.reverse {
       flex-direction: row-reverse;
   }

   .image-section {
       flex: 1;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 40px;
   }

   .image-placeholder {
       width: 100%;
       max-width: 450px;
       height: 350px;

       overflow: hidden;
       border-radius: 20px;
       position: relative;
       cursor: pointer;
   }

   .image-placeholder img {
       width: 100%;
       height: auto;

       object-fit: cover;
       border-radius: 18px;
       transition: transform 0.6s ease;
   }


   .image-placeholder:hover img {
       animation: scrollTopBottom 10s linear infinite;
   }

   @keyframes scrollTopBottom {
       0% {
           transform: translateY(0);
       }

       50% {
           transform: translateY(-60%);

       }

       100% {
           transform: translateY(0);
       }
   }

   .text-section {
       flex: 1;
       padding: 40px;
       color: white;
       max-width: 600px;
   }

   .slide-counter {
       display: inline-block;
       padding: 8px 20px;
       background: rgba(255, 255, 255, 0.2);
       border-radius: 25px;
       font-size: 12px;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 2px;
       margin-bottom: 25px;
       backdrop-filter: blur(10px);
   }

   .title {
       font-size: clamp(28px, 4vw, 48px);
       font-weight: 800;
       margin-bottom: 20px;
       line-height: 1.1;
       text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
       text-transform: uppercase;
   }

   .subtitle {
       font-size: 20px;
       opacity: 0.9;
       margin-bottom: 25px;
       font-weight: 400;
       font-style: italic;
   }

   .description {
       font-size: 16px;
       line-height: 1.7;
       margin-bottom: 35px;
       opacity: 0.9;
   }

   .button-group {
       display: flex;
       gap: 20px;
       flex-wrap: wrap;
   }

   .cta-button {
       background: rgba(255, 255, 255, 0.15);
       color: white;
       padding: 16px 32px;
       border: 2px solid rgba(255, 255, 255, 0.3);
       border-radius: 50px;
       font-size: 14px;
       font-weight: 700;
       letter-spacing: 1px;
       cursor: pointer;
       transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
       backdrop-filter: blur(15px);
       text-transform: uppercase;
       position: relative;
       overflow: hidden;
   }

   .cta-button::before {
       content: '';
       position: absolute;
       top: 0;
       left: -100%;
       width: 100%;
       height: 100%;
       background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
       transition: left 0.5s;
   }

   .cta-button:hover::before {
       left: 100%;
   }

   .cta-button:hover {
       background: rgba(255, 255, 255, 0.9);
       color: #333;
       transform: translateY(-3px);
       box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
   }

   .cta-button.primary {
       background: linear-gradient(45deg, #29a1d9, #29a1d9);
       color: white;
       border: 2px solid transparent;
   }

   .cta-button.primary:hover {
       transform: translateY(-3px);
       box-shadow: 0 10px 25px #29a1d9;
       background: linear-gradient(45deg, #29a1d9, #29a1d9);
   }


   .navigation {
       position: fixed;
       right: 40px;
       top: 60%;
       transform: translateY(-50%);
       display: flex;
       flex-direction: column;
       gap: 15px;
       z-index: 1000;
   }

   .nav-dot {
       width: 16px;
       height: 16px;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.4);
       cursor: pointer;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       position: relative;
   }

   .nav-dot::after {
       content: '';
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       width: 8px;
       height: 8px;
       border-radius: 50%;
       background: white;
       opacity: 0;
       transition: opacity 0.3s ease;
   }

   .nav-dot.active {
       background: rgba(255, 255, 255, 0.8);
       transform: scale(1.3);
   }

   .nav-dot.active::after {
       opacity: 1;
   }

   .nav-dot:hover {
       background: rgba(255, 255, 255, 0.7);
       transform: scale(1.2);
   }


   .nav-arrows {
       position: fixed;
       bottom: 40px;
       left: 50%;
       transform: translateX(-50%);
       display: flex;
       gap: 20px;
       z-index: 1000;
   }

   .nav-arrow {
       width: 50px;
       height: 50px;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.2);
       border: 2px solid rgba(255, 255, 255, 0.3);
       color: white;
       font-size: 18px;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.3s ease;
       backdrop-filter: blur(15px);
   }

   .nav-arrow:hover {
       background: rgba(255, 255, 255, 0.9);
       color: #333;
       transform: scale(1.1);
   }

   .nav-arrow:disabled {
       opacity: 0.3;
       cursor: not-allowed;
   }


   @media (max-width: 768px) {
       .content-wrapper {
           flex-direction: column;
           padding: 20px;
       }

       .content-wrapper.reverse {
           flex-direction: column;
       }

       .image-section,
       .text-section {
           padding: 20px;
       }

       .image-placeholder {
           max-width: 300px;
           height: 250px;
       }

       .navigation {
           right: 20px;
       }

       .nav-arrows {
           bottom: 20px;
       }
   }





   .contact-section {
       min-height: 100vh;
       background: #111;
       padding: 100px 20px;
       position: relative;
   }

   .contact-container {
       max-width: 1200px;
       margin: 0 auto;
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 80px;
       cursor: pointer;
       align-items: start;
   }

   .contact-info h2 {
       font-size: clamp(2.5rem, 4vw, 4rem);
       font-weight: 800;
       margin-bottom: 30px;
       background: linear-gradient(45deg, #1a76ab, #0000002f, #1a76ab);
       background-size: 200% 200%;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
       animation: textShine 3s ease-in-out infinite;
   }

   .contact-item {
       display: flex;
       align-items: center;
       margin-bottom: 30px;
       padding: 20px;
       background: rgba(255, 255, 255, 0.05);
       border: 1px solid rgba(255, 255, 255, 0.1);
       border-radius: 15px;
       backdrop-filter: blur(10px);
       transition: all 0.3s ease;
   }

   .contact-item:hover {
       background: rgba(255, 255, 255, 0.08);
       transform: translateX(10px);
   }

   .contact-icon {
       width: 50px;
       height: 50px;
       background: linear-gradient(135deg, #33d2c1, #1a1a1a, #33d2c1);
       border-radius: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
       margin-right: 20px;
       position: relative;
       overflow: hidden;
       transition: all 0.3s ease;
       color: #ffffff;
   }

   .contact-icon::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
       transform: translateX(-100%);
       transition: transform 0.6s ease;
   }

   .contact-icon:hover::before {
       transform: translateX(100%);
   }

   .contact-icon svg {
       width: 24px;
       height: 24px;
       color: #fff;
       z-index: 1;
       position: relative;
   }

   .contact-icon:hover {
       transform: scale(1.1);
       box-shadow: 0 0 20px rgba(51, 210, 193, 0.4);
   }

   .contact-form {
       background: rgba(255, 255, 255, 0.05);
       border: 1px solid rgba(255, 255, 255, 0.1);
       border-radius: 25px;
       padding: 40px;
       backdrop-filter: blur(10px);
   }

   .form-group {
       margin-bottom: 25px;
   }

   .form-group label {
       display: block;
       margin-bottom: 8px;
       color: #ccc;
       font-weight: 500;
   }

   .form-group input,
   .form-group textarea {
       width: 100%;
       padding: 15px 20px;
       background: rgba(255, 255, 255, 0.08);
       border: 1px solid rgba(255, 255, 255, 0.2);
       border-radius: 12px;
       color: #fff;
       font-size: 1rem;
       transition: all 0.3s ease;
       backdrop-filter: blur(5px);
   }

   .form-group input::placeholder,
   .form-group textarea::placeholder {
       color: rgba(255, 255, 255, 0.5);
   }

   .form-group input:focus,
   .form-group textarea:focus {
       outline: none;
       border-color: #29a1d9;
       box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1);
   }

   .form-group textarea {
       min-height: 120px;
       resize: vertical;
   }

   .submit-btn {
       background: linear-gradient(135deg, #29a2d8 0%, #1a1a1a 50%, #29a1d9 100%);
       color: white;
       padding: 18px 40px;
       border: none;
       border-radius: 15px;
       font-size: 1.1rem;
       font-weight: 700;
       cursor: pointer;
       transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
       width: 100%;
       position: relative;
       overflow: hidden;
       text-transform: uppercase;
       letter-spacing: 1px;
       box-shadow: 0 8px 25px #29a1d950;
   }

   .submit-btn::before {
       content: '';
       position: absolute;
       top: 0;
       left: -100%;
       width: 100%;
       height: 100%;
       background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
       transition: left 0.6s ease;
   }

   .submit-btn:hover::before {
       left: 100%;
   }

   .submit-btn:hover {
       transform: translateY(-5px) scale(1.02);
       box-shadow: 0 15px 35px #29a1d9;
       background: linear-gradient(135deg, #29a2d8 0%, #2a2a2a 50%, #29a1d9 100%);
   }

   .submit-btn:active {
       transform: translateY(-2px) scale(0.98);
       transition: all 0.1s ease;
   }

   .btn-text {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 10px;
       position: relative;
       z-index: 2;
   }

   .btn-icon {
       font-size: 1.2rem;
       animation: rocketPulse 2s ease-in-out infinite;
   }

   @keyframes rocketPulse {

       0%,
       100% {
           transform: scale(1);
       }

       50% {
           transform: scale(1.1);
       }
   }

   .btn-shine {
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
       transform: translateX(-100%);
       transition: transform 0.8s ease;
   }

   .submit-btn:hover .btn-shine {
       transform: translateX(100%);
   }


   .fade-in {
       opacity: 0;
       transform: translateY(40px);
       transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
   }

   .fade-in.visible {
       opacity: 1;
       transform: translateY(0);
   }

   .last-line {
       background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
       border-top: 1px solid rgba(48, 191, 177, 0.2);
       padding: 60px 20px 40px;
       margin-top: 80px;
       position: relative;
       overflow: hidden;
       margin-bottom: -109px;
   }

   .last-line::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 2px;
       background: linear-gradient(90deg, transparent, #30bfb1, transparent);
   }

   .footer-content {
       max-width: 1200px;
       margin: 0 auto;
       display: flex;
       justify-content: center;
       align-items: center;
   }


   .footer-text {
       text-align: center;
   }

   .copyright {
       color: #ccc;
       font-size: 0.95rem;
       margin-bottom: 8px;
       font-weight: 400;
   }

   .designer {
       color: #fff;
       font-size: 1rem;
       font-weight: 500;
   }

   .highlight {
       color: #30bfb1;
       font-weight: 600;
       position: relative;
   }

   .highlight::after {
       content: '';
       position: absolute;
       bottom: -2px;
       left: 0;
       width: 100%;
       height: 2px;
       background: linear-gradient(90deg, #30bfb1, #0073ff);
       border-radius: 1px;
   }



   @media (max-width: 768px) {
       .last-line {
           padding: 40px 20px 30px;
       }
   }

   @media (max-width: 1024px) {
       .nav-container {
           max-width: 100%;
           padding: 0 20px;
       }

       .nav-menu {
           gap: 25px;
       }

       .hero h1 {
           font-size: clamp(2.5rem, 4vw, 5rem);
       }

       .about-container,
       .contact-container {
           gap: 60px;
       }

       .services-grid {
           grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
           gap: 30px;
       }

       .content-wrapper {
           padding: 0 3%;
       }

       .image-placeholder {
           max-width: 380px;
           height: 300px;
       }
   }


   @media (max-width: 768px) {


       .nav-menu {
           display: none;
       }

       .hamburger {
           display: flex;
       }

       .nav-container {
           padding: 0 20px;
           height: 70px;
           justify-content: space-between;
       }

       .mobile-menu {
           top: 70px;
           height: calc(100vh - 70px);
           padding: 40px 20px;
       }


       .hero h1 {
           font-size: clamp(2rem, 6vw, 4rem);
           letter-spacing: -1px;
       }

       .hero-subtitle {
           font-size: clamp(1rem, 3vw, 1.4rem);
           margin-bottom: 25px;
       }

       .cta-buttons {
           flex-direction: column;
           align-items: center;
           gap: 15px;
       }

       .btn {
           width: 100%;
           max-width: 280px;
           padding: 14px 30px;
           font-size: 1rem;
       }

       .scroll-indicator {
           bottom: 20px;
       }


       .about-container {
           grid-template-columns: 1fr;
           gap: 40px;
           text-align: center;
       }

       .about-text h2 {
           font-size: clamp(2rem, 5vw, 3rem);
       }

       .about-text p {
           font-size: 1.1rem;
       }

       .stats-grid {
           grid-template-columns: repeat(2, 1fr);
           gap: 20px;
           margin-top: 30px;
       }

       .stat-item {
           padding: 25px 15px;
       }

       .stat-number {
           font-size: 2rem;
       }

       .visual-card {
           padding: 30px;
       }



       .services-container {
           padding: 0 10px;
       }

       .section-header h2 {
           font-size: clamp(2rem, 5vw, 3rem);
       }

       .services-grid {
           grid-template-columns: 1fr;
           gap: 25px;
       }

       .service-card {
           padding: 25px 20px;
       }

       .service-title {
           font-size: 1.3rem;
       }


  
   .slides-container {
           position: relative;
           width: auto;
           height: 108vh;
       }

       .slide {
           position: fixed;
           top: 310px;
           left: 0;
           width: 100%;
           height: auto;
           opacity: 0;
           visibility: hidden;
           transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
           z-index: 1;
       }

       .slide.active {
           opacity: 1;
           visibility: visible;
           z-index: 2;

       }

       .slide.pink {
           background: linear-gradient(135deg, transparent 0%, transparent 100%);
       }

       .slide.green {
           background: linear-gradient(135deg, transparent 0%, transparent 100%);
       }

       .slide.orange {
           background: linear-gradient(135deg, transparent 0%, transparent 100%);
       }

       .slide.purple {
           background: linear-gradient(135deg, transparent 0%, transparent 100%);
       }

       .slide.dark {
           background: linear-gradient(135deg, transparent 0%, transparent 100%);
       }

       .slide.blue {
           background: linear-gradient(135deg, transparent 0%, transparent 100%);
       }

       .content-wrapper,
       .content-wrapper.reverse {
           flex-direction: column;
           padding: 20px;
           height: auto;
           min-height: 70vh;
       }

       .image-section,
       .text-section {
           padding: 20px;
           flex: none;
           width: 100%;
       }

       .image-placeholder {
           max-width: 100%;
           height: 250px;
           font-size: 16px;
       }

       .title {
           font-size: clamp(24px, 5vw, 36px);
           margin-bottom: 15px;
       }

       .subtitle {
           font-size: 18px;
           margin-bottom: 20px;
       }

       .description {
           font-size: 15px;
           margin-bottom: 25px;
       }

       .button-group {
           flex-direction: column;
           gap: 15px;
       }

       .cta-button {
           padding: 14px 28px;
           font-size: 13px;
           width: 100%;
       }

       .stats-grid {
           grid-template-columns: repeat(2, 1fr);
           gap: 15px;
           margin-bottom: 25px;
       }

       .stat-item {
           padding: 20px 10px;
       }

       .stat-number {
           font-size: 24px;
       }


       .navigation {
           right: 20px;
           gap: 12px;
       }

       .nav-dot {
           width: 12px;
           height: 12px;
       }

       .nav-arrows {
           bottom: 20px;
           gap: 15px;
       }

       .nav-arrow {
           width: 45px;
           height: 45px;
           font-size: 16px;
       }


       .contact-container {
           grid-template-columns: 1fr;
           gap: 40px;
       }

       .contact-info h2 {
           font-size: clamp(2rem, 5vw, 3rem);
       }

       .contact-item {
           padding: 15px;
           margin-bottom: 20px;
       }

       .contact-icon {
           width: 40px;
           height: 40px;
           margin-right: 15px;
       }

       .contact-icon svg {
           width: 20px;
           height: 20px;
       }

       .contact-form {
           padding: 30px;
       }

       .form-group input,
       .form-group textarea {
           padding: 12px 16px;
           font-size: 0.95rem;
       }

       .form-group textarea {
           min-height: 100px;
       }

       .submit-btn {
           padding: 16px 35px;
           font-size: 1rem;
       }

       .btn-icon {
           font-size: 1.1rem;
       }
   }


   @media (max-width: 480px) {

       .whatsapp-logo svg {
           width: 25px;
           height: 25px;
       }

       .whatsapp-logo span {
           font-size: 14px;
       }

       .whatsapp-logo {
           gap: 8px;
           margin-bottom: 8px;
       }


       .nav-container {
           height: 65px;
           padding: 0 15px;
       }

       .mobile-menu {
           top: 65px;
           height: calc(100vh - 65px);
           padding: 30px 15px;
           gap: 25px;
           background-color: #000;
       }

       .mobile-menu a {
           padding: 15px 20px;
           font-size: 1rem;
       }


       .hero-container {
           padding: 0 15px;
       }

       .hero h1 {
           font-size: clamp(1.8rem, 7vw, 3rem);
           margin-bottom: 15px;
       }

       .hero-subtitle {
           font-size: clamp(0.9rem, 4vw, 1.2rem);
           margin-bottom: 20px;
       }

       .cta-buttons {
           margin-bottom: 30px;
       }

       .btn {
           padding: 12px 25px;
           font-size: 0.95rem;
           max-width: 250px;
       }


       .about-section {
           padding: 80px 15px;
       }

       .about-text h2 {
           font-size: clamp(1.8rem, 6vw, 2.5rem);
           margin-bottom: 20px;
       }

       .about-text p {
           font-size: 1rem;
           margin-bottom: 15px;
       }

       .stats-grid {
           grid-template-columns: -1fr;
           gap: 15px;
       }

       .slides-container {
           height: 73vh;
       }

       .stat-item {
           padding: 20px 15px;
       }

       .visual-card {
           padding: 25px 20px;
       }

       .mission-image {
           width: 200px;
           height: 200px;
       }
       


       .services-section {
           padding: 80px 15px;
       }

       .section-header {
           margin-bottom: 50px;
       }

       .section-subtitle {
           font-size: 1rem;
       }

       .service-card {
           padding: 25px 20px;
       }

       .service-title {
           font-size: 1.2rem;
       }

       .service-description {
           font-size: 0.95rem;
       }


       .portfolio-section {
           padding: 180px 15px;
       }

       .content-wrapper,
       .content-wrapper.reverse {
           padding: 15px;
           min-height: 60vh;
       }

       .image-section,
       .text-section {
           padding: 15px;
       }

       .image-placeholder {
           height: 200px;
           font-size: 14px;
       }

       .slide-counter {
           padding: 6px 15px;
           font-size: 11px;
           margin-bottom: 20px;
       }

       .title {
           font-size: clamp(20px, 6vw, 28px);
       }

       .subtitle {
           font-size: 16px;
       }

       .description {
           font-size: 14px;
           line-height: 1.6;
       }

       .cta-button {
           padding: 12px 24px;
           font-size: 12px;
       }

       .stats-grid .stat-item {
           padding: 15px 10px;
       }

       .stat-number {
           font-size: 20px;
       }


       .navigation {
           right: 15px;
           gap: 10px;
       }

       .nav-dot {
           width: 10px;
           height: 10px;
       }

       .nav-arrows {
           bottom: 15px;
           gap: 10px;
       }

       .nav-arrow {
           width: 40px;
           height: 40px;
           font-size: 14px;
       }


       .contact-section {
           padding: 80px 15px;
       }

       .contact-info h2 {
           font-size: clamp(1.8rem, 6vw, 2.5rem);
       }

       .contact-item {
           padding: 12px;
           margin-bottom: 15px;
       }

       .contact-icon {
           width: 35px;
           height: 35px;
           margin-right: 12px;
       }

       .contact-icon svg {
           width: 18px;
           height: 18px;
       }

       .contact-form {
           padding: 25px 20px;
       }

       .form-group {
           margin-bottom: 20px;
       }

       .form-group label {
           margin-bottom: 6px;
           font-size: 0.9rem;
       }

       .form-group input,
       .form-group textarea {
           padding: 10px 14px;
           font-size: 0.9rem;
       }

       .submit-btn {
           padding: 14px 30px;
           font-size: 0.95rem;
       }

       .btn-icon {
           font-size: 1rem;
       }

    .logo.magnetic img {
        margin-left: 0;
        width: 140px;
        margin-top: 7px;
    }

       .logo.magnetic {
           width: 31%;
       }
       .mission-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    max-width: 400px;
    height:69px;
    margin: 0 auto;
}
   }


   @media (max-width: 320px) {
       .nav-container {
           padding: 0 10px;
       }

       .hero-container {
           padding: 0 10px;
       }

       .hero h1 {
           font-size: clamp(1.5rem, 8vw, 2.5rem);
       }

       .btn {
           max-width: 220px;
           padding: 10px 20px;
       }

       .about-section,
       .services-section,
       .portfolio-section,
       .contact-section {
           padding: 60px 10px;
       }

       .content-wrapper,
       .content-wrapper.reverse {
           padding: 10px;
       }

       .image-placeholder {
           height: 180px;
       }

       .contact-form {
           padding: 20px 15px;
       }
   }


   @media (max-height: 500px) and (orientation: landscape) {
       .hero {
           height: auto;
           min-height: 100vh;
           padding: 100px 0 50px;
       }

       .slide {
           position: relative;
           min-height: 100vh;
       }

       .content-wrapper,
       .content-wrapper.reverse {
           flex-direction: row;
           min-height: 80vh;
       }

       .navigation {
           top: 50%;
       }

       .nav-arrows {
           bottom: 20px;
       }
   }


   @media (-webkit-min-device-pixel-ratio: 2),
   (min-resolution: 192dpi) {
       .image-placeholder {
           border-width: 1px;
       }

       .nav-dot {
           border-width: 1px;
       }
   }


   @media (prefers-reduced-motion: reduce) {

       *,
       ::before,
       ::after {
           animation-delay: -1ms !important;
           animation-duration: 1ms !important;
           animation-iteration-count: 1 !important;
           background-attachment: initial !important;
           scroll-behavior: auto !important;
           transition-duration: 0s !important;
           transition-delay: 0s !important;
       }
   }

   /* Ensure testimonial star animation is continuous even with reduced motion preference */
   .testimonial-rating .star {
       animation-iteration-count: infinite !important;
       animation-duration: 2s !important;
       animation-delay: var(--star-delay, 0s);
   }


   @media (prefers-color-scheme: dark) {}


   @media print {

       .navbar,
       .hamburger,
       .mobile-menu,
       .navigation,
       .nav-arrows,
       .particles {
           display: none !important;
       }

       .hero,
       .about-section,
       .services-section,
       .portfolio-section,
       .contact-section {
           page-break-inside: avoid;
       }
   }



   .back-to-top {
       --size: 52px;

       --bg: transparent;

       --fg: #32d1c1;

       --shadow: #ffffff;
       position: fixed;
       border: 1px solid #ffffff;
       right: 24px;
       bottom: 24px;
       width: var(--size);
       height: var(--size);
       display: inline-grid;
       place-items: center;
       background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0)),
           var(--bg);
       color: var(--fg);
       border-radius: 40px;
       box-shadow: var(--shadow);
       cursor: pointer;
       transform: translateY(12px) scale(0.95);
       opacity: 0;
       pointer-events: none;
       transition:
           opacity 260ms cubic-bezier(.2, .9, .2, 1),
           transform 260ms cubic-bezier(.2, .9, .2, 1),
           box-shadow 200ms;
       z-index: 9999;


   }

   .back-to-top.show {
       opacity: 1;
       transform: translateY(0) scale(1);
       pointer-events: auto;
   }

   .back-to-top:focus {

       outline-offset: 4px;
   }

   .back-to-top .icon {
       width: 22px;
       height: 22px;
       display: inline-block;
   }


   .back-to-top:hover {
       transform: translateY(-4px) scale(1.02);
       box-shadow: 0 14px 30px #32d1c1;
   }


   @media (prefers-reduced-motion: reduce) {

       .back-to-top,
       .back-to-top.show,
       .back-to-top:hover {
           transition: none;
           transform: none;
       }
   }


   @media (max-width: 480px) {
       .back-to-top {
           right: 14px;
           bottom: 14px;
           --size: 46px;
       }





       .slides-container {
           position: relative;
           width: auto;
           height: 108vh;
       }

       .slide {
           position: fixed;
           top: 185px;
           left: 0;
           width: 100%;
           height: auto;
           opacity: 0;
           visibility: hidden;
           transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
           z-index: 1;
       }

       .slide.active {
           opacity: 1;
           visibility: visible;
           z-index: 2;

       }

       .slide.pink {
           background: linear-gradient(135deg, transparent 0%, transparent 100%);
       }

       .slide.green {
           background: linear-gradient(135deg, transparent 0%, transparent 100%);
       }

       .slide.orange {
           background: linear-gradient(135deg, transparent 0%, transparent 100%);
       }

       .slide.purple {
           background: linear-gradient(135deg, transparent 0%, transparent 100%);
       }

       .slide.dark {
           background: linear-gradient(135deg, transparent 0%, transparent 100%);
       }

       .slide.blue {
           background: linear-gradient(135deg, transparent 0%, transparent 100%);
       }

       .content-wrapper {
           display: flex;
           align-items: center;
           justify-content: center;
           height: 100vh;
           padding: 0 5%;
           max-width: 1400px;
           margin: 0 auto;
       }

       .content-wrapper.reverse {
           flex-direction: column-reverse;
       }

       .image-section {
           flex: 1;
           display: flex;
           align-items: center;
           justify-content: center;
           padding: 40px;
       }

       .image-placeholder {
           width: 100%;
           max-width: 450px;
           height: 350px;

           overflow: hidden;
           border-radius: 20px;
           position: relative;
           cursor: pointer;
       }

       .image-placeholder img {
           width: 100%;
           height: auto;

           object-fit: cover;
           border-radius: 18px;
           transition: transform 0.6s ease;
       }


       .image-placeholder:hover img {
           animation: scrollTopBottom 10s linear infinite;
       }

       @keyframes scrollTopBottom {
           0% {
               transform: translateY(0);
           }

           50% {
               transform: translateY(-60%);

           }

           100% {
               transform: translateY(0);
           }
       }

       .text-section {
           flex: 1;
           padding: 40px;
           color: white;
           max-width: 600px;
           margin-top: 66px;
           text-align: center;
       }

       .slide-counter {
           display: inline-block;
           padding: 8px 20px;
           background: rgba(255, 255, 255, 0.2);
           border-radius: 25px;
           font-size: 12px;
           font-weight: 600;
           text-transform: uppercase;
           letter-spacing: 2px;
           margin-bottom: 25px;
           backdrop-filter: blur(10px);
       }

       .title {
           font-size: clamp(28px, 4vw, 48px);
           font-weight: 800;
           margin-bottom: 20px;
           line-height: 1.1;
           text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
           text-transform: uppercase;
       }

       .subtitle {
           font-size: 20px;
           opacity: 0.9;
           margin-bottom: 25px;
           font-weight: 400;
           font-style: italic;
       }

       .description {
           font-size: 16px;
           line-height: 1.7;
           margin-bottom: 35px;
           opacity: 0.9;
       }

       .button-group {
           display: flex;
           gap: 20px;
           flex-wrap: wrap;
       }

       .cta-button {
           background: rgba(255, 255, 255, 0.15);
           color: white;
           padding: 16px 32px;
           border: 2px solid rgba(255, 255, 255, 0.3);
           border-radius: 50px;
           font-size: 14px;
           font-weight: 700;
           letter-spacing: 1px;
           cursor: pointer;
           transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
           backdrop-filter: blur(15px);
           text-transform: uppercase;
           position: relative;
           overflow: hidden;
       }

       .cta-button::before {
           content: '';
           position: absolute;
           top: 0;
           left: -100%;
           width: 100%;
           height: 100%;
           background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
           transition: left 0.5s;
       }

       .cta-button:hover::before {
           left: 100%;
       }

       .cta-button:hover {
           background: rgba(255, 255, 255, 0.9);
           color: #333;
           transform: translateY(-3px);
           box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
       }

       .cta-button.primary {
           background: linear-gradient(45deg, #33d2c1, #33d2c291);
           color: white;
           border: 2px solid transparent;
       }

       .cta-button.primary:hover {
           transform: translateY(-3px);
           box-shadow: 0 10px 25px #33d2c1;
           background: linear-gradient(45deg, #33d2c1, #33d2c291);
       }


       .navigation {
           position: fixed;
           right: 24px;
           top: 52%;
           transform: translateY(-50%);
           display: flex;
           flex-direction: column;
           gap: 15px;
           z-index: 1000;
       }

       .nav-dot {
           width: 16px;
           height: 16px;
           border-radius: 50%;
           background: rgba(255, 255, 255, 0.4);
           cursor: pointer;
           transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
           position: relative;
       }

       .nav-dot::after {
           content: '';
           position: absolute;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
           width: 8px;
           height: 8px;
           border-radius: 50%;
           background: white;
           opacity: 0;
           transition: opacity 0.3s ease;
       }

       .nav-dot.active {
           background: rgba(255, 255, 255, 0.8);
           transform: scale(1.3);
       }

       .nav-dot.active::after {
           opacity: 1;
       }

       .nav-dot:hover {
           background: rgba(255, 255, 255, 0.7);
           transform: scale(1.2);
       }


       .nav-arrows {
           position: fixed;
           bottom: 40px;
           left: 50%;
           transform: translateX(-50%);
           display: flex;
           gap: 20px;
           z-index: 1000;
       }

       .nav-arrow {
           width: 50px;
           height: 50px;
           border-radius: 50%;
           background: rgba(255, 255, 255, 0.2);
           border: 2px solid rgba(255, 255, 255, 0.3);
           color: white;
           font-size: 18px;
           cursor: pointer;
           display: flex;
           align-items: center;
           justify-content: center;
           transition: all 0.3s ease;
           backdrop-filter: blur(15px);
       }

       .nav-arrow:hover {
           background: rgba(255, 255, 255, 0.9);
           color: #333;
           transform: scale(1.1);
       }

       .nav-arrow:disabled {
           opacity: 0.3;
           cursor: not-allowed;
       }

   }


   .contact-form .form-group {
       position: relative;
       margin-bottom: 25px;
   }

   .contact-form .error-message {
       display: none;
       color: #ff4757;
       font-size: 0.85rem;
       margin-top: 5px;
       font-weight: 500;
       animation: fadeIn 0.3s ease;
   }

   .contact-form input.error,
   .contact-form textarea.error {
       border-color: #ff4757 !important;
       box-shadow: 0 0 0 2px rgba(255, 71, 87, 0.2);
   }

   .contact-form input:focus,
   .contact-form textarea:focus {
       border-color: #007bff;
       box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
   }

   .submit-btn {
       position: relative;
       overflow: hidden;
       transition: all 0.3s ease;
   }

   .submit-btn:disabled {
       opacity: 0.7;
       cursor: not-allowed;
   }

   .btn-loader {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
   }

   .btn-loader .spinner {
       width: 16px;
       height: 16px;
       border: 2px solid transparent;
       border-top: 2px solid currentColor;
       border-radius: 50%;
       animation: spin 1s linear infinite;
   }

   @keyframes spin {
       0% {
           transform: rotate(0deg);
       }

       100% {
           transform: rotate(360deg);
       }
   }

   .form-message {
       margin-top: 20px;
       padding: 15px;
       border-radius: 8px;
       font-weight: 500;
       animation: slideIn 0.3s ease;
   }

   .form-message .message-content {
       display: flex;
       align-items: center;
       gap: 10px;
   }

   .form-message.success {
       background: rgba(40, 167, 69, 0.1);
       border: 1px solid rgba(40, 167, 28, 0.3);
       color: #fff;
   }

   .form-message.error {
       background: rgba(220, 53, 69, 0.1);
       border: 1px solid rgba(220, 53, 69, 0.3);
       color: #dc3545;
   }

   .form-message .message-icon {
       font-size: 1.2rem;
       font-weight: bold;
   }

   @keyframes fadeIn {
       from {
           opacity: 0;
           transform: translateY(-10px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   @keyframes slideIn {
       from {
           opacity: 0;
           transform: translateY(20px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }


   @media (max-width: 768px) {
       .contact-form .error-message {
           font-size: 0.8rem;
       }

       .form-message {
           padding: 12px;
           font-size: 0.9rem;
       }
   }

   /* ===== FOOTER STYLES ===== */
   .main-footer {
       background: #121212;
       position: relative;
       overflow: hidden;
       margin-top: 80px;
   }

   .main-footer::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
       opacity: 0.5;
       pointer-events: none;
   }

   .footer-container {
       max-width: 1141px;
       margin: 0 auto;
       padding: 50px 20px 30px;
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
       gap: 60px;
       position: relative;

       z-index: 1;
   }

   /* Left Section */
   .footer-left {
       display: flex;
       flex-direction: column;
       gap: 25px;
   }

   .company-info {
       display: flex;
       flex-direction: column;
       gap: 15px;
   }

   .footer-logo {
       display: flex;
       align-items: center;
       justify-content: flex-start;
   }

   .logo-img {
       width: 200px;
       height: auto;
       object-fit: contain;
       /* filter: brightness(0) invert(1); */
   }

   .mission-statement {
       color: #ffffff;
       font-size: 0.95rem;
       line-height: 1.5;
       margin: 0;
       opacity: 0.9;
       max-width: 350px;
       margin-top: -60px;
   }

   .social-media {
       display: flex;
       gap: 15px;
       align-items: center;
   }

   .social-link {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 35px;
       height: 35px;
       background: transparent;
       border-radius: 0;
       transition: all 0.3s ease;
       text-decoration: none;
   }

   .social-link:hover {
       transform: translateY(-2px);
   }

   .social-icon {
       width: 20px;
       height: 20px;
       fill: #ffffff;
       transition: fill 0.3s ease;
   }

   .social-link:hover .social-icon {
       fill: #29a1d9;
   }

   .back-to-top-btn {
       display: flex;
       align-items: center;
       gap: 6px;
       background: transparent;
       border: 1px solid rgba(255, 255, 255, 0.3);
       color: #ffffff;
       padding: 10px 16px;
       border-radius: 0;
       font-size: 0.8rem;
       font-weight: 600;
       letter-spacing: 0.5px;
       cursor: pointer;
       transition: all 0.3s ease;
       text-transform: uppercase;
       align-self: start;
       margin-top: 10px;
   }

   .back-to-top-btn:hover {
       background: rgba(255, 255, 255, 0.1);
       border-color: rgba(255, 255, 255, 0.6);
       transform: translateY(-2px);
   }

   .chevron-icon {
       width: 19px;
       height: 20px;
       fill: #ffffff;
   }

   /* Right Section */
   .footer-right {
       display: flex;
       justify-content: flex-end;
   }

   /* Professional Footer Styles */
   .footer-content-grid {
       display: flex;
       flex-wrap: wrap;
       gap: 97px;
       max-width: 800px;
       justify-content: flex-start;
       margin-top: 60px;
       color: white !important;
   }

   .contact-item-footer {
       display: flex;
       align-items: center;




       backdrop-filter: blur(10px);
       transition: all 0.3s ease;
   }

   .contact-item-footer:hover {

       transform: translateX(10px);
   }

   .contact-icon-footer {
       width: 30px;
       height: 30px;
       border-radius: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
       margin-right: 20px;
       position: relative;
       overflow: hidden;
       transition: all 0.3s ease;
   }

   .contact-icon-footer::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
       transform: translateX(-100%);
       transition: transform 0.6s ease;
   }

   .contact-icon-footer::before {
       transform: translateX(100%);
   }

   .contact-icon-footer svg {
       width: 24px;
       height: 24px;
       color: #fff;
       z-index: 1;
       position: relative;
   }

   .contact-icon-footer {
       transform: scale(1.1);

   }

   .footer-section {
       display: flex;
       flex-direction: column;
       gap: 20px;

   }

   .section-heading {
       color: #ffffff;
       font-size: 1.1rem;
       font-weight: 700;
       margin: 0;
       text-transform: uppercase;
       letter-spacing: 1px;
       border-bottom: 2px solid #176fa6;
       padding-bottom: 8px;
       width: fit-content;
   }

   .contact-info {
       display: flex;
       flex-direction: column;
       gap: 15px;
   }

   .contact-item {
       display: flex;
       align-items: flex-start;
       gap: 12px;
       color: #ffffff;
       font-size: 0.9rem;
       opacity: 0.9;
       transition: all 0.3s ease;
       line-height: 1.5;
   }

   .contact-item:hover {
       opacity: 1;
       color: #29a1d9;
       transform: translateX(5px);
   }

   .contact-icon {
       width: 50px;
       height: 50px;
       background: linear-gradient(135deg, #29a1d9, #1a1a1a, #29a2d8);
       border-radius: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
       margin-right: 20px;
       position: relative;
       overflow: hidden;
       transition: all 0.3s ease;
       color: #fff;
   }

   .contact-item:hover .contact-icon {
       fill: #176fa6;
   }

   .footer-links {
       list-style: none;
       padding: 0;
       margin: 0;
       display: flex;
       flex-direction: column;
       gap: 12px;
   }

   .footer-link {
       color: #ffffff;
       text-decoration: none;
       font-size: 0.9rem;
       opacity: 0.8;
       transition: all 0.3s ease;
       position: relative;
       padding-left: 0;
   }

   .footer-link:hover {
       opacity: 1;
       color: #176fa6;
       transform: translateX(5px);
   }

   .footer-link::before {
       content: '→';
       position: absolute;
       left: -20px;
       opacity: 0;
       transition: all 0.3s ease;
       color: #ffffff;
   }

   .footer-link:hover::before {
       opacity: 1;
       left: -15px;
   }

   .email-link {
       color: #ffffff;
       text-decoration: none;
       transition: all 0.3s ease;
       font-weight: 500;
   }

   .email-link:hover {
       color: #176fa6;
       text-decoration: underline;
   }

   .nav-column {
       display: flex;
       flex-direction: column;
       gap: 15px;
   }

   .nav-heading {
       color: #ffffff;
       font-size: 1rem;
       font-weight: 700;
       margin: 0;
       text-transform: uppercase;
       letter-spacing: 0.5px;
   }

   .nav-links {
       list-style: none;
       padding: 0;
       margin: 0;
       display: flex;
       flex-direction: column;
       gap: 8px;
   }

   .nav-link {
       color: #ffffff;
       text-decoration: none;
       font-size: 0.9rem;
       transition: all 0.3s ease;
       opacity: 0.8;
   }

   .nav-link:hover {
       opacity: 1;
       color: #29a2d8;
       transform: translateX(3px);
   }

   .nav-link:first-child {
       text-decoration: underline;
       opacity: 1;
   }

   /* Bottom Strip */
   .footer-bottom {
       background:rgba(0, 0, 0, 0.547);
       padding: 15px 0;
       text-align: center;
       position: relative;
       z-index: 1;
       border-top: 1px solid rgba(255, 255, 255, 0.1);
   }

   .copyright-text {
       color: #ffffff;
       font-size: 0.85rem;
       margin: 0;
       font-weight: 500;
   }

   /* Responsive Design */
   @media (max-width: 768px) {
       .footer-container {
           grid-template-columns: 1fr;
           gap: 40px;
           padding: 40px 20px 30px;
       }

       .footer-right {
           justify-content: flex-start;
       }

       .footer-content-grid {
           grid-template-columns: 1fr;
           gap: 30px;
           max-width: 100%;
       }

       .footer-section {
           gap: 15px;
       }

       .section-heading {
           font-size: 1rem;
       }

       .contact-item {
           font-size: 0.85rem;
           gap: 10px;
       }

       .contact-icon {
           width: 16px;
           height: 16px;
       }

       .footer-link {
           font-size: 0.85rem;
       }

       .contact-section {
           gap: 15px;
       }

       .contact-item {
           font-size: 0.85rem;
       }

       .contact-icon {
           width: 14px;
           height: 14px;
       }

       .footer-nav {
           grid-template-columns: 1fr;
           gap: 30px;
       }

       .company-name {
           font-size: 1.5rem;
       }

       .mission-statement {
           font-size: 0.9rem;
       }

       .social-media {
           gap: 15px;
       }

       .social-link {
           width: 40px;
           height: 40px;
       }

       .social-icon {
           width: 18px;
           height: 18px;
       }

       .back-to-top-btn {
           align-self: center;
           padding: 10px 16px;
           font-size: 0.8rem;
       }
       .logo.magnetic img {
    margin-left: 4px;
    width: 160px;
    margin-top: 7px;
}
    .mission-image {
        width: 250px;
        height: 250px;
    }
    .mission-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    max-width: 400px;
    height: 152px;
    margin: 0 auto;
}

   }

   @media (max-width: 480px) {
       .footer-container {
           padding: 30px 15px 20px;
       }

       .company-name {
           font-size: 1.3rem;
           letter-spacing: 1px;
       }

       .mission-statement {
           font-size: 0.85rem;
       }

       .nav-heading {
           font-size: 1rem;
       }

       .nav-link {
           font-size: 0.9rem;
       }
   }

   /* Additional Responsive Breakpoints */

   /* Large Tablets and Small Desktops */
   @media (max-width: 1024px) {
       .footer-container {
           gap: 40px;
           padding: 40px 20px 25px;
       }

       .footer-content-grid {
           gap: 30px;
           max-width: 700px;
       }
   }

   /* Tablets - Updated Layout */
   @media (max-width: 768px) {
       .footer-container {
           flex-direction: column;
           gap: 30px;
           padding: 35px 20px 25px;
           align-items: center;
           text-align: center;
       }

       .footer-left {
           align-items: center;
           text-align: center;
       }

       .footer-right {
           justify-content: center;
           width: 100%;
       }

       .footer-content-grid {
           justify-content: center;
           gap: 25px;
           max-width: 100%;
       }

       .footer-section {
           gap: 15px;
           min-width: 200px;
       }

       .section-heading {
           font-size: 1rem;
           text-align: center;
           margin-left: 48px;
       }
       .logo-img {
    width: 200px;
    height: auto;
    object-fit: contain;
    margin-left: 237px;
}

       .contact-item {
           font-size: 0.85rem;
           gap: 10px;
           justify-content: center;
       }

       .contact-icon {
           width: 50px;
           height: 50px;
       }

       .footer-link {
           font-size: 0.85rem;
       }

       .mission-statement {
           font-size: 0.9rem;
           text-align: center;
           max-width: 100%;
       }

       .social-media {
           gap: 15px;
           justify-content: center;
       }

       .social-link {
           width: 40px;
           height: 40px;
       }

       .social-icon {
           width: 18px;
           height: 18px;
       }

       .back-to-top-btn {
           align-self: center;
           padding: 10px 16px;
           font-size: 0.8rem;
       }
   }

   /* Mobile Devices */
   @media (max-width: 480px) {
       .footer-container {
           padding: 25px 15px 20px;
           gap: 25px;
       }

       .footer-content-grid {
           flex-direction: column;
           gap: 20px;
           align-items: center;
       }

       .footer-section {
           gap: 25px;
           min-width: auto;
           width: 100%;
           max-width: 280px;
       }

       .section-heading {
           font-size: 0.9rem;
           padding-bottom: 6px;
           margin-left: 58px;
       }

       .contact-item {
           font-size: 0.8rem;
           gap: 8px;
           flex-direction: column;
           text-align: center;
           align-items: center;
       }

       .contact-icon {
           width: 14px;
           height: 14px;
           margin-top: 0;
       }

       .footer-link {
           font-size: 0.8rem;
       }

       .footer-links {
           gap: 8px;
           align-items: center;
       }

       .mission-statement {
           font-size: 0.85rem;
           margin-top: -40px;
       }

       .logo-img {
           width: 166px;
        margin-left: 101px;
       }

       .social-media {
           gap: 12px;
       }

       .social-link {
           width: 35px;
           height: 35px;
       }

       .social-icon {
           width: 16px;
           height: 16px;
       }

       .back-to-top-btn {
           padding: 8px 12px;
           font-size: 0.75rem;
       }

       .chevron-icon {
           width: 12px;
           height: 12px;
       }
   }

   /* Extra Small Devices */
   @media (max-width: 320px) {
       .footer-container {
           padding: 20px 10px 15px;
       }

       .footer-section {
           max-width: 250px;
       }

       .contact-item {
           font-size: 0.75rem;
       }

       .footer-link {
           font-size: 0.75rem;
       }

       .section-heading {
           font-size: 0.85rem;
       }

       .logo-img {
           width: 120px;
       }
   }